<template>
  <h3>过渡及动画 演示</h3>

  <button @click="visible = !visible">显示/隐藏 ( CSS动画 )</button>
  <div class="clip">
    <transition appear>
      <Demo v-show="visible" title="不指定名字"></Demo>
    </transition>
  </div>

  <br>
  <button @click="visible2 = !visible2">显示/隐藏 ( CSS过渡 )</button>
  <div class="clip">
    <transition-group appear name="transit">
      <Demo v-show="visible2" key='one' title="指定名字"></Demo>
      <Demo v-show="!visible2" key='two' title="另外一个"></Demo>
    </transition-group>
  </div>

  <br>
  <button @click="visible3 = !visible3">显示/隐藏 (集成第三方动画Animate.css)</button>
  <div class="third">
    <transition
      appear 
      name="animate__animated animate__bounce"
      enter-active-class="animate__swing"
      leave-active-class="animate__zoomOutDown"
    >
      <Demo v-show="visible3" title="第三方动画"></Demo>
    </transition>
  </div>

  <hr>
  <p>
    说明:<br>
    &nbsp;&nbsp;Vue 提供了一些抽象概念，可以帮助处理过渡和动画，特别是在响应某些变化时。这些抽象的概念包括：<br>
    1. 组件进入和离开 DOM 的钩子，在 CSS 和 JS 中均可用，使用内置的 &lt;transition&gt; 组件。<br>
    2. 过渡模式，以便你在过渡期间编排顺序。<br>
    3. 处理多个元素就地更新的钩子，使用 &lt;transition-group&gt; 组件，通过 FLIP 技术来提高性能。<br>
    4. 使用 watchers 来处理应用中不同状态的过渡。<br>
    5. 也可直接使用<a href="https://animate.style/"><b>animate.css</b></a>之类的第三方动画库, 一般可以配合以下自定义过滤class类名使用:<br>
    &nbsp;&nbsp;&nbsp;&nbsp;enter-from-class, enter-active-class, enter-to-class, leave-from-class, leave-active-class, leave-to-class.<br>
    &nbsp;&nbsp;&nbsp;&nbsp;参考资料: <a href="https://v3.cn.vuejs.org/guide/transitions-enterleave.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1-class-%E7%B1%BB%E5%90%8D"><b>自定义过渡 class 类名</b></a> <br>
    注意: 诸如 perspective、backface-visibility 和 transform:translateZ(x) 等 property 将让浏览器知道你需要硬件加速。<br>
    <br>
    官方文档:
    <a href="https://v3.cn.vuejs.org/guide/transitions-enterleave.html"><b>进入过渡 &amp; 离开过渡</b></a>&nbsp;,&nbsp;
    <a href="https://v3.cn.vuejs.org/guide/transitions-list.html"><b>列表过渡</b></a>&nbsp;,&nbsp;
    <a href="https://v3.cn.vuejs.org/guide/transitions-state.html"><b>状态过渡</b></a>
  </p>
</template>

<script>
import {ref} from 'vue'
import 'animate.css'
import Demo from './Demo'

export default {
  components: {
    Demo
  },
  setup() {
    let visible = ref(true)
    let visible2 = ref(true)
    let visible3 = ref(true)

    return {visible, visible2, visible3}
  },
}
</script>

<style scoped>

.clip {
  overflow: hidden;
}

.third {
  height: 80px;
}

/* 用CSS动画来实现 */

.v-enter-active {
  animation: noname 0.5s linear;
}

.v-leave-active {
  animation: noname 0.5s linear reverse;
}

@keyframes noname {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* 用CSS过渡来实现 */

.transit-enter-active, .transit-leave-active {
  transition: 0.5s linear;
}

.transit-enter-from, .transit-leave-to {
  transform: translateX(-100%);
}

.transit-enter-to, .transit-leave-from {
  transform: translateX(0);
}

</style>